<template>
  <view>
    <login-container :title="type?'设置密码':'重置密码'" button-text="确认" :show-read="false" @submit="confirm">
      <view class="margin-top-40">
        <view v-for="(val,key) in formList" :key="key" :class="{'margin-bottom-16':key===2}" class="input-box margin-bottom-56 flex-row align-center">
          <input
            v-model="form[val.attr]"
            class="text-32 color-t1 flex-item"
            placeholder-class="color-t3"
            :type="val.type"
            :placeholder="val.placeholder"
            :maxlength="val.maxLength"
            :password="val.attr==='password'&&!showPassword"
            :disabled="val.disabled"
          >
          <view v-if="key===1" class="margin-left-10">
            <get-code :code-from="form.codeFrom" :phone="form.phone" />
          </view>

          <view v-if="key===2" class="padding-10" @click="showPassword = !showPassword">
            <text :class="showPassword?'tbb-yanjing1':'tbb-yanjing'" class="text-32 color-t1" />
          </view>
        </view>
        <text class="text-20 color-t3">输入6-30位由字母、数字和符号两种及以上的组合密码</text>
      </view>
    </login-container>
    <view v-if="!type && !setting" class="text-center">
      <text class="text-28 color-t3">想起密码？</text>
      <text class="text-28 color-primary" @click="jump('/passport/password-login/password-login','redirectTo')">去登录</text>
    </view>
  </view>
</template>

<script>
import LoginContainer from '../components/login-container/login-container'
import { mapGetters } from 'vuex'
import { resetPasswordV2 } from '@/common/api/user'
import { formVerify } from '@/common/util'
import { encryption } from '../index'
import { updatePasswordV2 } from '../api'
export default {
  name: 'ForgetPassword',
  components: {
    LoginContainer
  },
  data() {
    return {
      type: 0, // 0：忘记密码  1：首次登录无密码,
      setting: '',
      form: {
        phone: '',
        password: '',
        code: '',
        codeFrom: 'forgetPass'
      },
      showPassword: false
    }
  },
  onLoad(e) {
    if (e.type) this.type = e.type
    if (e.setting) {
      this.setting = e.setting
      this.form.phone = this.userInfo.phone
    }
  },
  computed: {
    formList() {
      if (this.type) {
        return [
          { attr: 'password', placeholder: '密码', type: 'text', maxLength: 30, test: 'detectPassword', min: 6, must: true }
        ]
      } else {
        return [
          { attr: 'phone', placeholder: '手机号', type: 'digit', maxLength: 11, must: true, test: 'mobile', disabled: this.setting },
          { attr: 'code', placeholder: '验证码', type: 'digit', maxLength: 4, must: true },
          { attr: 'password', placeholder: '密码', type: 'text', maxLength: 30, must: true, test: 'detectPassword', min: 6 }
        ]
      }
    },
    ...mapGetters({
      userInfo: 'userInfo'
    })
  },
  methods: {
    async confirm() {
      if (formVerify(this.form, this.formList)) {
        const user = encryption({
          data: this.form,
          key: '1234567887654321',
          param: ['password']
        })

        let err
        let res
        if (this.type) [err, res] = await updatePasswordV2(user)
        else [err, res] = await resetPasswordV2(user)

        if (!this.$http.errorCheck(err, res)) return false

        this.toast(`${this.type ? '设置' : '重置'}密码成功!`, () => {
          if (this.type) this.login.identityUser()
          else this.jump('/passport/password-login/password-login', 'redirectTo')
        })
      }
    }
  }
}
</script>

<style scoped lang="scss">
@import "../login";
</style>
